import { Typography, Row, Col, Card, Button, Avatar, Badge, Space } from 'antd';
import { BookOutlined, StarOutlined, AppstoreOutlined, CodeOutlined, HeartOutlined, BarChartOutlined, MessageOutlined, ArrowRightOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import './HomePage.scss';
import { useEffect, useState } from 'react';

const { Title, Paragraph, Text, Link } = Typography;

// 模拟数据 - 最近更新的收藏
const recentBookmarks = [
  {
    id: 1,
    title: 'React性能优化技巧',
    description: '掌握React应用性能优化的核心方法',
    category: '前端开发',
    icon: '📝',
    date: '2024-05-15',
  },
  {
    id: 2,
    title: 'Node.js微服务架构',
    description: '构建可扩展的微服务系统',
    category: '后端开发',
    icon: '🔧',
    date: '2024-05-10',
  },
  {
    id: 3,
    title: 'Figma设计系统指南',
    description: '创建一致且高效的设计系统',
    category: 'UI设计',
    icon: '🎨',
    date: '2024-05-08',
  },
];

// 模拟数据 - 热门文章
const popularArticles = [
  {
    id: 1,
    title: '2024年前端开发趋势预测',
    author: '张明',
    avatar: '张',
    likes: 128,
    comments: 32,
    category: '技术前沿',
  },
  {
    id: 2,
    title: 'TypeScript高级类型系统详解',
    author: '李华',
    avatar: '李',
    likes: 96,
    comments: 24,
    category: 'TypeScript',
  },
  {
    id: 3,
    title: 'CSS Grid布局实战教程',
    author: '王芳',
    avatar: '王',
    likes: 84,
    comments: 18,
    category: 'CSS',
  },
];

// 特性卡片数据
const features = [
  {
    key: 'bookmark',
    title: '网页收藏',
    description: '一键收藏网页内容，智能分类管理，随时查阅',
    icon: <BookOutlined style={{ fontSize: '48px', color: '#1890ff' }} />,
    path: '/bookmark',
    color: '#1890ff',
  },
  {
    key: 'favorites',
    title: '个人收藏',
    description: '收藏各类资源，构建个性化知识库，提升学习效率',
    icon: <StarOutlined style={{ fontSize: '48px', color: '#faad14' }} />,
    path: '/favorites',
    color: '#faad14',
  },
  {
    key: 'software',
    title: '常用软件',
    description: '整理和推荐优质软件，提高工作效率和生活品质',
    icon: <AppstoreOutlined style={{ fontSize: '48px', color: '#52c41a' }} />,
    path: '/software',
    color: '#52c41a',
  },
  {
    key: 'blog',
    title: '技术博客',
    description: '浏览和分享技术文章，紧跟行业发展趋势',
    icon: <CodeOutlined style={{ fontSize: '48px', color: '#eb2f96' }} />,
    path: '/blog',
    color: '#eb2f96',
  },
];

const HomePage: React.FC = () => {
  const navigate = useNavigate();
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    // 添加动画效果
    setIsVisible(true);
  }, []);

  return (
    <div className="home-page">
      {/* 顶部英雄区域 */}
      <div className={`hero-section ${isVisible ? 'fade-in' : ''}`}>
        <div className="hero-content">
          <Badge.Ribbon text="全新上线" color="blue">
            <Title level={1} className="hero-title">
              知识<span className="highlight-text">管理</span>，从未如此简单
            </Title>
          </Badge.Ribbon>
          <Paragraph className="hero-description">
            一站式收藏、整理和分享各类知识资源，打造属于您的个人数字知识库
          </Paragraph>
          <Space size="middle" className="hero-actions">
            <Button type="primary" size="large" onClick={() => navigate('/bookmark')}>
              开始使用
              <ArrowRightOutlined style={{ marginLeft: '8px' }} />
            </Button>
            <Button size="large" onClick={() => navigate('/blog')}>
              浏览博客
            </Button>
          </Space>
        </div>
        <div className="hero-graphics">
          {/* 可以添加一些装饰性图形元素 */}
        </div>
      </div>

      {/* 统计数据卡片 */}
      <div className={`stats-cards ${isVisible ? 'slide-up' : ''}`}>
        <Row gutter={[24, 24]}>
          <Col xs={24} sm={12} md={6}>
            <Card className="stat-card">
              <div className="stat-icon">
                <BookOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
              </div>
              <div className="stat-content">
                <div className="stat-number">1,583</div>
                <div className="stat-label">网页收藏</div>
              </div>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card className="stat-card">
              <div className="stat-icon">
                <StarOutlined style={{ fontSize: '24px', color: '#faad14' }} />
              </div>
              <div className="stat-content">
                <div className="stat-number">754</div>
                <div className="stat-label">个人收藏</div>
              </div>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card className="stat-card">
              <div className="stat-icon">
                <AppstoreOutlined style={{ fontSize: '24px', color: '#52c41a' }} />
              </div>
              <div className="stat-content">
                <div className="stat-number">128</div>
                <div className="stat-label">常用软件</div>
              </div>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card className="stat-card">
              <div className="stat-icon">
                <BarChartOutlined style={{ fontSize: '24px', color: '#eb2f96' }} />
              </div>
              <div className="stat-content">
                <div className="stat-number">42</div>
                <div className="stat-label">技术文章</div>
              </div>
            </Card>
          </Col>
        </Row>
      </div>

      {/* 主要功能区域 */}
      <div className={`features-section ${isVisible ? 'slide-up-delay' : ''}`}>
        <Title level={2} className="section-title">
          主要功能
        </Title>
        <Paragraph className="section-description">
          我们提供全方位的知识管理解决方案，满足您的各种需求
        </Paragraph>
        <Row gutter={[24, 36]}>
          {features.map((feature) => (
            <Col xs={24} sm={12} lg={6} key={feature.key}>
              <Card
                hoverable
                className="feature-card"
                bordered={false}
                cover={
                  <div 
                    className="feature-icon-container"
                    style={{ backgroundColor: `${feature.color}10` }} 
                  >
                    <div className="feature-icon-wrapper">
                      {feature.icon}
                    </div>
                  </div>
                }
                actions={[
                  <Button 
                    type="text" 
                    onClick={() => navigate(feature.path)}
                    icon={<ArrowRightOutlined />}
                    className="feature-button"
                    style={{ color: feature.color }}
                  >
                    了解更多
                  </Button>
                ]}
              >
                <Card.Meta
                  title={<Text strong>{feature.title}</Text>}
                  description={feature.description}
                />
              </Card>
            </Col>
          ))}
        </Row>
      </div>

      {/* 内容区域 - 分为两栏 */}
      <div className="content-section">
        <Row gutter={[24, 24]}>
          {/* 左侧 - 最近更新 */}
          <Col xs={24} lg={12}>
            <div className={`recent-updates ${isVisible ? 'slide-right' : ''}`}>
              <div className="section-header">
                <Title level={3}>最近收藏</Title>
                <Link onClick={() => navigate('/bookmark')}>查看全部</Link>
              </div>
              <div className="recent-list">
                {recentBookmarks.map((item) => (
                  <Card key={item.id} hoverable className="recent-card">
                    <Row gutter={[16, 16]}>
                      <Col xs={6} md={4}>
                        <div className="bookmark-icon">{item.icon}</div>
                      </Col>
                      <Col xs={18} md={20}>
                        <div className="bookmark-info">
                          <Text strong className="bookmark-title">{item.title}</Text>
                          <Text type="secondary" className="bookmark-description">{item.description}</Text>
                          <div className="bookmark-meta">
                            <Badge color="blue" text={item.category} />
                            <Text type="secondary" className="bookmark-date">{item.date}</Text>
                          </div>
                        </div>
                      </Col>
                    </Row>
                  </Card>
                ))}
              </div>
            </div>
          </Col>

          {/* 右侧 - 热门文章 */}
          <Col xs={24} lg={12}>
            <div className={`popular-articles ${isVisible ? 'slide-left' : ''}`}>
              <div className="section-header">
                <Title level={3}>热门文章</Title>
                <Link onClick={() => navigate('/blog')}>浏览更多</Link>
              </div>
              <div className="articles-list">
                {popularArticles.map((article) => (
                  <Card key={article.id} hoverable className="article-card">
                    <Row gutter={[16, 16]}>
                      <Col xs={20}>
                        <div className="article-info">
                          <Text strong className="article-title">{article.title}</Text>
                          <div className="article-meta">
                            <Badge color="purple" text={article.category} />
                          </div>
                        </div>
                      </Col>
                      <Col xs={4} className="article-avatar">
                        <Avatar>{article.avatar}</Avatar>
                      </Col>
                    </Row>
                    <div className="article-actions">
                      <Space size="small">
                        <span className="action-item">
                          <HeartOutlined style={{ fontSize: '14px', marginRight: '4px' }} />
                          {article.likes}
                        </span>
                        <span className="action-item">
                          <MessageOutlined style={{ fontSize: '14px', marginRight: '4px' }} />
                          {article.comments}
                        </span>
                      </Space>
                    </div>
                  </Card>
                ))}
              </div>
            </div>
          </Col>
        </Row>
      </div>

      {/* 呼吁行动区域 */}
      <div className={`cta-section ${isVisible ? 'fade-in-delay' : ''}`}>
        <Title level={2} className="cta-title">
          开始您的知识管理之旅
        </Title>
        <Paragraph className="cta-description">
          立即注册并体验我们的全部功能，让知识管理变得更加高效和愉悦
        </Paragraph>
        <Button type="primary" size="large" className="cta-button">
          免费注册
        </Button>
      </div>
    </div>
  );
};

export default HomePage;
